<template>
  <loading :status="isShow" :loading-text="''" @onClickMask="handleClickMask">
    <div class="loading-title">{{ title }}</div>
    <div v-show="isShowPercent" class="loading-progress">
      <span class="text-complete">{{ complete }}</span>
      <span class="text-gap">/</span>
      <span class="text-total">{{ total }}</span>
    </div>
    <u-line-progress v-show="isShowPercent" :striped="true" :percent="percent" :striped-active="true"></u-line-progress>
  </loading>
</template>

<script>
import Loading from '@/components/loading/loading.vue'

export default {
  components: {
    Loading
  },

  props: {
    title: {
      type: String,
      default: '已同步/全部'
    },
    isShow: {
      type: Boolean,
      default: true
    },
		isShowPercent: {
      type: Boolean,
      default: true
    },
    complete: {
      type: Number,
      default: 0
    },
    total: {
      type: Number,
      default: 0
    }
  },

  data() {
  	return {

  	}
  },

  computed: {
    // 百分比值
    percent () {
      let complete = this.complete
      complete = parseFloat(complete)
      complete = isNaN(complete) ? 0 : complete
      complete = complete < 0 ? 0 : complete
      let total = this.total
      total = parseFloat(total)
      total = isNaN(total) ? 0 : total
      total = total <= 0 ? 1 : total
      let value = parseFloat((complete / total).toFixed(2))
      return 100 * value
    }
  },

	methods: {
		handleClickMask () {
			this.$emit('onClickMask')
		}
	}
}
</script>

<style>
.loading-progress {
  display: flex;
  justify-content: center;
  padding: 4px 0;
}
.text-complete {
  color: #999;
}
.text-total {
  color: #2979ff;
}
.text-gap {
  padding: 0 4px;
}
.loading-title {
  text-align: center;
}
</style>
